<template>
	<view class="login">
		<view class="loginHeader">登录</view>
		<view class="loginLogo">
			<image class="logoImg" src="../../static/logo.png"></image>
			<view class="logoContents">
				即刻加入游戏狂热者行列
			</view>
		</view>
		<view class="main">
			<view class="phone">
				<view class="phoneHeader">
					<view class="item active">手机号码</view>
					<view class="item">邮箱账号</view>
				</view>
				<view class="loginIpt">
					<view class="choose">
						CN+86
						<image src="../../static/down.png" ></image>
					</view>
					<input class="ipt" placeholder="输入手机号" type="text" value="" />
				</view>
			</view>
			<view class="loginTips">
				未注册用户验证后将自动注册并登录
			</view>
			<button class="loginBtn" @click="showError">
				登录
			</button>
			<checkbox-group @change="change" class="loginAgreement">
				<checkbox :checked="isChecked" class="check"/><p>我已详细阅读并同意TapTap<span> 服务协议 </span>和<span> 隐私政策 </span></p>		
			</checkbox-group>
			<view class="loginMode">
				<view class="line"></view>
				<view class="topText">
					社交账号登录
				</view>
				<view class="loginImg">
					<view class="item" @click="getUserInfo">
						<image src="../../static/微信.png" class="wxImg"></image>
						微信
					</view>
					<view class="item" @click="showError">
						<image src="../../static/QQ.png" class="qqImg"></image>
						QQ
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isChecked:false
			}
		},
		methods:{
			// 复选框状态
			change(){
				this.isChecked=!this.isChecked
				// console.log(this.isChecked);
			},
			// 授权获取用户信息
			getUserInfo(){
				// 判断用户是否同意协议（复选框选中）
				if(!this.isChecked){
					// 没勾选 弹出提示
					wx.showToast({
					  title: '尚未同意协议',
					  icon: 'none',
					  duration: 2000
					})
					return
				}
				wx.getUserProfile({
					desc: '是否同意授权用户信息', 
					success: res => {
						wx.setStorageSync('userInfo_key',res.userInfo)
						wx.reLaunch({
							url:'/pages/index/index'
						})
					}
				});
			},
			showError(){
				wx.showToast({
				  title: '请选择微信登录',
				  icon: 'none',
				  duration: 2000
				})
			}
		}
	}
</script>

<style lang="stylus">
	.login
		padding 0 30rpx
		.loginHeader
			padding 32rpx 0
			font-size 40rpx
			text-align center
		.loginLogo
			text-align center
			padding-top 80rpx
			.logoImg
				width 400rpx
				height 110rpx
				margin-bottom -10rpx
			.logoContents
				color #14b9c8
				font-size 28rpx
		.main
			.phone
				.phoneHeader
					display flex
					font-size 32rpx
					margin 60rpx 0
					.item
						padding: 17rpx 4vw
						text-align center
						width 50%
						color #999
						border-bottom 1rpx solid #eee
						&.active
							border-bottom 6rpx solid #14b9c8
							color #14b9c8
				.loginIpt
					display flex
					height 70rpx
					box-sizing: border-box;
					border-bottom 1rpx solid #eee
					align-items center
					.choose
						font-size 30rpx
						line-height 70rpx
						color #999
						width 200rpx
						text-align center
						image
							width 25rpx
							height 25rpx
							position relative
							top 5rpx
							right -5rpx
			.loginTips
				font-size 24rpx
				line-height 36rpx
				color #999
				margin: 10rpx 0 30rpx 0
			.loginBtn
				background-color #eee
				height 90rpx
				line-height 90rpx
				color #999
				&::after
					border none 
			.loginAgreement
				display flex
				align-items center
				margin-bottom 100rpx
				.check .wx-checkbox-input
					border-radius 0
					width 20rpx
					height 20rpx
					&.wx-checkbox-input.wx-checkbox-input-checked 
						background  #0394F0
						border-color #0394F0
					&.wx-checkbox-input.wx-checkbox-input-checked::before
						width 20rpx
						height 20rpx
						color  #fff 
						line-height  20rpx
						text-align  center
						font-size  22rpx;
						background  transparent
						transform  translate(-50%, -50%) scale(1)
						-webkit-transform  translate(-50%, -50%) scale(1)
				p
					font-size  24rpx;
					margin-top 10rpx
					color #666
					span
						color #333
			.loginMode
				position relative
				.topText
					padding 20rpx 30rpx
					line-height 40rpx
					font-size 24rpx
					color #A0A0A0
					position  absolute;
					top  -20px;
					left  50%;
					white-space  nowrap;
					transform  translateX(-50%);
					background-color #fff
				.line
					border-top 1rpx solid #e5e5e5
					height 44rpx
				.loginImg
					display flex
					justify-content center
					image
						display block
						width 90rpx
						height 90rpx
					.item
						padding 15rpx 30rpx
						text-align center
						font-size 24rpx
						line-height 36rpx
						color #999
						
					
					
				
						
				
</style>
